גישה למישורי VideoFrame ב-WebCodecs: צלילת עומק למניפולציה של נתוני וידאו גולמיים

במשך שנים, עיבוד וידאו בביצועים גבוהים בדפדפן הרגיש כמו חלום רחוק. מפתחים היו מוגבלים לעיתים קרובות למגבלות של אלמנט ה-<video> וה-API של Canvas 2D, שאמנם היו חזקים, אך יצרו צווארי בקבוק בביצועים והציעו גישה מוגבלת לנתוני הווידאו הגולמיים שבבסיסם. הגעתו של ה-WebCodecs API שינתה את הנוף הזה באופן יסודי, כשהיא מספקת גישה ברמה נמוכה למקודדי המדיה המובנים של הדפדפן. אחת התכונות המהפכניות ביותר שלו היא היכולת לגשת ישירות ולבצע מניפולציה על הנתונים הגולמיים של פריימים בודדים של וידאו דרך אובייקט ה-VideoFrame.

מאמר זה הוא מדריך מקיף למפתחים המעוניינים להתקדם מעבר לניגון וידאו פשוט. אנו נחקור את המורכבויות של גישה למישורי VideoFrame, נבהיר מושגים כמו מרחבי צבע ופריסת זיכרון, ונספק דוגמאות מעשיות כדי להעצים אתכם לבנות את הדור הבא של יישומי וידאו בדפדפן, החל מפילטרים בזמן אמת ועד למשימות מתוחכמות של ראייה ממוחשבת.

דרישות קדם

כדי להפיק את המרב ממדריך זה, עליכם להיות בעלי הבנה מוצקה ב:

• JavaScript מודרני: כולל תכנות אסינכרוני (async/await, Promises).
• מושגי יסוד בווידאו: היכרות עם מונחים כמו פריימים, רזולוציה ומקודדים תהיה מועילה.
• ממשקי API של דפדפן: ניסיון עם ממשקי API כמו Canvas 2D או WebGL יועיל אך אינו הכרחי לחלוטין.

הבנת פריימים של וידאו, מרחבי צבע ומישורים (Planes)

לפני שנצלול ל-API, עלינו לבנות מודל מנטלי מוצק של איך נראים נתוני פריים של וידאו. וידאו דיגיטלי הוא רצף של תמונות סטילס, או פריימים. כל פריים הוא רשת של פיקסלים, ולכל פיקסל יש צבע. האופן שבו הצבע הזה מאוחסן מוגדר על ידי מרחב הצבע ופורמט הפיקסלים.

RGBA: שפת האם של הרשת

רוב מפתחי הרשת מכירים את מודל הצבע RGBA. כל פיקסל מיוצג על ידי ארבעה רכיבים: אדום, ירוק, כחול ואלפא (שקיפות). הנתונים מאוחסנים בדרך כלל באופן משולב (interleaved) בזיכרון, כלומר ערכי ה-R, G, B ו-A של פיקסל בודד מאוחסנים ברצף:

[R1, G1, B1, A1, R2, G2, B2, A2, ...]

במודל זה, התמונה כולה מאוחסנת בבלוק זיכרון רציף יחיד. אנו יכולים לחשוב על כך כעל "מישור" (plane) נתונים יחיד.

YUV: השפה של דחיסת וידאו

מקודדי וידאו, עם זאת, לעתים רחוקות עובדים ישירות עם RGBA. הם מעדיפים מרחבי צבע YUV (או ליתר דיוק, Y'CbCr). מודל זה מפריד את מידע התמונה ל:

• Y (Luma): הבהירות או מידע הגוונים האפורים. העין האנושית היא הרגישה ביותר לשינויים ב-luma.
• U (Cb) ו-V (Cr): הכרומיננטיות או מידע הפרשי הצבע. העין האנושית פחות רגישה לפרטי צבע מאשר לפרטי בהירות.

הפרדה זו היא המפתח לדחיסה יעילה. על ידי הפחתת הרזולוציה של רכיבי ה-U וה-V — טכניקה הנקראת דגימת צבע מופחתת (chroma subsampling) — אנו יכולים להפחית באופן משמעותי את גודל הקובץ עם אובדן איכות מינימלי הניתן להבחנה. זה מוביל לפורמטי פיקסלים מישוריים (planar), שבהם רכיבי ה-Y, U ו-V מאוחסנים בבלוקי זיכרון נפרדים, או "מישורים" (planes).

פורמט נפוץ הוא I420 (סוג של YUV 4:2:0), שבו עבור כל בלוק של 2x2 פיקסלים, ישנן ארבע דגימות Y אך רק דגימת U אחת ודגימת V אחת. משמעות הדבר היא שלמישורי ה-U וה-V יש חצי מהרוחב וחצי מהגובה של מישור ה-Y.

הבנת ההבחנה הזו היא קריטית מכיוון ש-WebCodecs נותן לכם גישה ישירה בדיוק למישורים אלה, בדיוק כפי שהמפענח מספק אותם.

אובייקט VideoFrame: השער שלכם לנתוני פיקסלים

החלק המרכזי בפאזל הזה הוא אובייקט ה-VideoFrame. הוא מייצג פריים בודד של וידאו ומכיל לא רק את נתוני הפיקסלים אלא גם מטא-דאטה חשוב.

מאפיינים מרכזיים של VideoFrame

• format: מחרוזת המציינת את פורמט הפיקסלים (למשל, 'I420', 'NV12', 'RGBA').
• codedWidth / codedHeight: הממדים המלאים של הפריים כפי שהם מאוחסנים בזיכרון, כולל כל ריפוד הנדרש על ידי המקודד.
• displayWidth / displayHeight: הממדים שבהם יש להשתמש להצגת הפריים.
• timestamp: חותמת הזמן של הצגת הפריים במיקרו-שניות.
• duration: משך הפריים במיקרו-שניות.

מתודת הקסם: copyTo()

המתודה העיקרית לגישה לנתוני פיקסלים גולמיים היא videoFrame.copyTo(destination, options). מתודה אסינכרונית זו מעתיקה את נתוני המישור של הפריים לתוך חוצץ (buffer) שאתם מספקים.

• destination: אובייקט ArrayBuffer או מערך טיפוסי (כמו Uint8Array) גדול מספיק כדי להכיל את הנתונים.
• options: אובייקט המציין אילו מישורים להעתיק ומהי פריסת הזיכרון שלהם. אם מושמט, הוא מעתיק את כל המישורים לחוצץ רציף יחיד.

המתודה מחזירה Promise שמסתיימת עם מערך של אובייקטי PlaneLayout, אחד לכל מישור בפריים. כל אובייקט PlaneLayout מכיל שני פרטי מידע חיוניים:

• offset: ההיסט (offset) בבתים שבו מתחילים הנתונים של מישור זה בתוך חוצץ היעד.
• stride: מספר הבתים בין תחילת שורת פיקסלים אחת לתחילת השורה הבאה עבור אותו מישור.

מושג קריטי: Stride מול Width

זהו אחד ממקורות הבלבול הנפוצים ביותר עבור מפתחים חדשים בתכנות גרפיקה ברמה נמוכה. אינכם יכולים להניח שכל שורת נתוני פיקסלים ארוזה בצפיפות אחת אחרי השנייה.

• Width (רוחב) הוא מספר הפיקסלים בשורה של התמונה.
• Stride (פסע) (נקרא גם pitch או line step) הוא מספר הבתים בזיכרון מתחילת שורה אחת לתחילת השורה הבאה.

לעתים קרובות, stride יהיה גדול מ-width * bytes_per_pixel. הסיבה לכך היא שהזיכרון לעתים קרובות מרופד כדי להתיישר עם גבולות חומרה (למשל, גבולות של 32 או 64 בתים) לעיבוד מהיר יותר על ידי המעבד או המעבד הגרפי. עליכם תמיד להשתמש ב-stride כדי לחשב את כתובת הזיכרון של פיקסל בשורה ספציפית.

התעלמות מ-stride תוביל לתמונות מוטות או מעוותות ולגישה שגויה לנתונים.

דוגמה מעשית 1: גישה והצגה של מישור גווני אפור (Grayscale)

נתחיל עם דוגמה פשוטה אך רבת עוצמה. רוב הווידאו ברשת מקודד בפורמט YUV כמו I420. מישור ה-'Y' הוא למעשה ייצוג מלא בגווני אפור של התמונה. אנו יכולים לחלץ רק את המישור הזה ולרנדר אותו לקנבס.

async function displayGrayscale(videoFrame) {
  // אנו מניחים שה-videoFrame הוא בפורמט YUV כמו 'I420' או 'NV12'.
  if (!videoFrame.format.startsWith('I4')) {
    console.error('This example requires a YUV 4:2:0 planar format.');
    videoFrame.close();
    return;
  }

  const yPlaneInfo = videoFrame.layout[0]; // מישור ה-Y הוא תמיד הראשון.

  // יצירת חוצץ (buffer) שיכיל רק את נתוני מישור ה-Y.
  const yPlaneData = new Uint8Array(yPlaneInfo.stride * videoFrame.codedHeight);

  // העתקת מישור ה-Y אל החוצץ שלנו.
  await videoFrame.copyTo(yPlaneData, {
    rect: { x: 0, y: 0, width: videoFrame.codedWidth, height: videoFrame.codedHeight },
    layout: [yPlaneInfo]
  });

  // כעת, yPlaneData מכיל את הפיקסלים הגולמיים בגווני אפור.
  // עלינו לרנדר אותו. ניצור חוצץ RGBA עבור הקנבס.
  const canvas = document.getElementById('my-canvas');
  canvas.width = videoFrame.displayWidth;
  canvas.height = videoFrame.displayHeight;
  const ctx = canvas.getContext('2d');
  const imageData = ctx.createImageData(canvas.width, canvas.height);

  // נעבור על פיקסלי הקנבס ונמלא אותם מנתוני מישור ה-Y.
  for (let y = 0; y < videoFrame.displayHeight; y++) {
    for (let x = 0; x < videoFrame.displayWidth; x++) {
      // חשוב: יש להשתמש ב-stride כדי למצוא את האינדקס הנכון במקור!
      const yIndex = y * yPlaneInfo.stride + x;
      const luma = yPlaneData[yIndex];

      // חישוב אינדקס היעד בחוצץ ImageData של RGBA.
      const rgbaIndex = (y * canvas.width + x) * 4;

      imageData.data[rgbaIndex] = luma;     // אדום
      imageData.data[rgbaIndex + 1] = luma; // ירוק
      imageData.data[rgbaIndex + 2] = luma; // כחול
      imageData.data[rgbaIndex + 3] = 255;  // אלפא
    }
  }

  ctx.putImageData(imageData, 0, 0);

  // קריטי: יש תמיד לסגור את ה-VideoFrame כדי לשחרר את הזיכרון שלו.
  videoFrame.close();
}

דוגמה זו מדגישה מספר שלבים מרכזיים: זיהוי פריסת המישור הנכונה, הקצאת חוצץ יעד, שימוש ב-copyTo כדי לחלץ את הנתונים, ואיטרציה נכונה על הנתונים באמצעות ה-stride כדי לבנות תמונה חדשה.

דוגמה מעשית 2: מניפולציה במקום (פילטר ספיה)

כעת בואו נבצע מניפולציית נתונים ישירה. פילטר ספיה הוא אפקט קלאסי שקל ליישם. עבור דוגמה זו, קל יותר לעבוד עם פריים RGBA, שאותו תוכלו לקבל מקנבס או מהקשר WebGL.

async function applySepiaFilter(videoFrame) {
  // דוגמה זו מניחה שפריים הקלט הוא 'RGBA' או 'BGRA'.
  if (videoFrame.format !== 'RGBA' && videoFrame.format !== 'BGRA') {
    console.error('Sepia filter example requires an RGBA frame.');
    videoFrame.close();
    return null;
  }

  // הקצאת חוצץ להחזקת נתוני הפיקסלים.
  const frameDataSize = videoFrame.allocationSize();
  const frameData = new Uint8Array(frameDataSize);
  await videoFrame.copyTo(frameData);

  const layout = videoFrame.layout[0]; // RGBA הוא מישור יחיד

  // כעת, נבצע מניפולציה על הנתונים בחוצץ.
  for (let y = 0; y < videoFrame.codedHeight; y++) {
    for (let x = 0; x < videoFrame.codedWidth; x++) {
      const pixelIndex = y * layout.stride + x * 4; // 4 בתים לפיקסל (R,G,B,A)

      const r = frameData[pixelIndex];
      const g = frameData[pixelIndex + 1];
      const b = frameData[pixelIndex + 2];

      const tr = 0.393 * r + 0.769 * g + 0.189 * b;
      const tg = 0.349 * r + 0.686 * g + 0.168 * b;
      const tb = 0.272 * r + 0.534 * g + 0.131 * b;

      frameData[pixelIndex] = Math.min(255, tr);
      frameData[pixelIndex + 1] = Math.min(255, tg);
      frameData[pixelIndex + 2] = Math.min(255, tb);
      // אלפא (frameData[pixelIndex + 3]) נשאר ללא שינוי.
    }
  }

  // יצירת VideoFrame *חדש* עם הנתונים שעברו שינוי.
  const newFrame = new VideoFrame(frameData, {
    format: videoFrame.format,
    codedWidth: videoFrame.codedWidth,
    codedHeight: videoFrame.codedHeight,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  // אל תשכחו לסגור את הפריים המקורי!
  videoFrame.close();

  return newFrame;
}

זה מדגים מחזור שלם של קריאה-שינוי-כתיבה: העתקת הנתונים החוצה, מעבר עליהם בלולאה תוך שימוש ב-stride, החלת טרנספורמציה מתמטית על כל פיקסל, ובניית VideoFrame חדש עם הנתונים שהתקבלו. פריים חדש זה יכול לאחר מכן להיות מרונדר לקנבס, להישלח ל-VideoEncoder, או לעבור לשלב עיבוד אחר.

הביצועים חשובים: JavaScript מול WebAssembly (WASM)

איטרציה על מיליוני פיקסלים עבור כל פריים (לפריים 1080p יש מעל 2 מיליון פיקסלים, או 8 מיליון נקודות נתונים ב-RGBA) ב-JavaScript יכולה להיות איטית. בעוד שמנועי JS מודרניים מהירים להפליא, עבור עיבוד בזמן אמת של וידאו ברזולוציה גבוהה (HD, 4K), גישה זו יכולה בקלות להעמיס על התהליכון הראשי (main thread), ולהוביל לחוויית משתמש מקוטעת.

כאן WebAssembly (WASM) הופך לכלי חיוני. WASM מאפשר לכם להריץ קוד שנכתב בשפות כמו C++, Rust או Go במהירות כמעט-נייטיב בתוך הדפדפן. זרימת העבודה לעיבוד וידאו הופכת להיות:

1. ב-JavaScript: השתמשו ב-videoFrame.copyTo() כדי לקבל את נתוני הפיקסלים הגולמיים לתוך ArrayBuffer.
2. העברה ל-WASM: העבירו הפניה לחוצץ זה למודול ה-WASM המהודר שלכם. זוהי פעולה מהירה מאוד מכיוון שהיא אינה כרוכה בהעתקת הנתונים.
3. ב-WASM (C++/Rust): הריצו את אלגוריתמי עיבוד התמונה הממוטבים שלכם ישירות על חוצץ הזיכרון. זה מהיר בסדרי גודל מאשר לולאת JavaScript.
4. חזרה ל-JavaScript: לאחר ש-WASM מסיים, השליטה חוזרת ל-JavaScript. לאחר מכן תוכלו להשתמש בחוצץ ששונה כדי ליצור VideoFrame חדש.

עבור כל יישום רציני של מניפולציית וידאו בזמן אמת — כמו רקעים וירטואליים, זיהוי אובייקטים או פילטרים מורכבים — מינוף WebAssembly אינו רק אופציה; הוא הכרח.

טיפול בפורמטי פיקסלים שונים (למשל, I420, NV12)

בעוד ש-RGBA הוא פשוט, לרוב תקבלו פריימים בפורמטי YUV מישוריים מ-VideoDecoder. בואו נבחן כיצד לטפל בפורמט מישורי מלא כמו I420.

ל-VideoFrame בפורמט I420 יהיו שלושה מתארי פריסה במערך ה-layout שלו:

• layout[0]: מישור ה-Y (luma). הממדים הם codedWidth x codedHeight.
• layout[1]: מישור ה-U (chroma). הממדים הם codedWidth/2 x codedHeight/2.
• layout[2]: מישור ה-V (chroma). הממדים הם codedWidth/2 x codedHeight/2.

כך הייתם מעתיקים את כל שלושת המישורים לחוצץ יחיד:

async function extractI420Planes(videoFrame) {
  const totalSize = videoFrame.allocationSize({ format: 'I420' });
  const allPlanesData = new Uint8Array(totalSize);

  const layouts = await videoFrame.copyTo(allPlanesData);

  // layouts הוא מערך של 3 אובייקטי PlaneLayout
  console.log('Y Plane Layout:', layouts[0]); // { offset: 0, stride: ... }
  console.log('U Plane Layout:', layouts[1]); // { offset: ..., stride: ... }
  console.log('V Plane Layout:', layouts[2]); // { offset: ..., stride: ... }

  // כעת ניתן לגשת לכל מישור בתוך החוצץ `allPlanesData`
  // באמצעות ההיסט (offset) והפסע (stride) הספציפיים לו.

  const yPlaneView = new Uint8Array(
    allPlanesData.buffer,
    layouts[0].offset,
    layouts[0].stride * videoFrame.codedHeight
  );

  // שימו לב שממדי הכרומה הם חצי!
  const uPlaneView = new Uint8Array(
    allPlanesData.buffer,
    layouts[1].offset,
    layouts[1].stride * (videoFrame.codedHeight / 2)
  );

  const vPlaneView = new Uint8Array(
    allPlanesData.buffer,
    layouts[2].offset,
    layouts[2].stride * (videoFrame.codedHeight / 2)
  );

  console.log('Accessed Y plane size:', yPlaneView.byteLength);
  console.log('Accessed U plane size:', uPlaneView.byteLength);

  videoFrame.close();
}

פורמט נפוץ נוסף הוא NV12, שהוא חצי-מישורי (semi-planar). יש לו שני מישורים: אחד ל-Y, ומישור שני שבו ערכי U ו-V משולבים (למשל, [U1, V1, U2, V2, ...]). ה-WebCodecs API מטפל בזה באופן שקוף; ל-VideoFrame בפורמט NV12 יהיו פשוט שתי פריסות במערך ה-layout שלו.

אתגרים ושיטות עבודה מומלצות

עבודה ברמה נמוכה זו היא רבת עוצמה, אך היא מגיעה עם אחריות.

ניהול זיכרון הוא מעל הכל

אובייקט VideoFrame מחזיק כמות משמעותית של זיכרון, שלעתים קרובות מנוהל מחוץ לערימה (heap) של מנגנון איסוף האשפה של JavaScript. אם לא תשחררו זיכרון זה באופן מפורש, תגרמו לדליפת זיכרון שעלולה לקרוס את לשונית הדפדפן.

תמיד, אבל תמיד, קראו ל-videoFrame.close() כשסיימתם לעבוד עם פריים.

אופי אסינכרוני

כל גישה לנתונים היא אסינכרונית. הארכיטקטורה של היישום שלכם חייבת לטפל בזרימת ה-Promises ו-async/await כראוי כדי למנוע תנאי מרוץ ולהבטיח צינור עיבוד חלק.

תאימות דפדפנים

WebCodecs הוא API מודרני. למרות שהוא נתמך בכל הדפדפנים הגדולים, בדקו תמיד את זמינותו והיו מודעים לפרטי יישום או מגבלות ספציפיות לספק. השתמשו בזיהוי תכונות (feature detection) לפני שתנסו להשתמש ב-API.

סיכום: חזית חדשה לווידאו ברשת

היכולת לגשת ישירות ולבצע מניפולציה על נתוני המישור הגולמיים של VideoFrame באמצעות ה-WebCodecs API היא שינוי פרדיגמה עבור יישומי מדיה מבוססי רשת. היא מסירה את הקופסה השחורה של אלמנט ה-<video> ומעניקה למפתחים את השליטה הגרעינית שהייתה שמורה בעבר ליישומים נייטיב.

על ידי הבנת יסודות פריסת הזיכרון של וידאו — מישורים, stride ופורמטי צבע — ועל ידי מינוף הכוח של WebAssembly לפעולות קריטיות לביצועים, אתם יכולים כעת לבנות כלי עיבוד וידאו מתוחכמים להפליא ישירות בדפדפן. החל מתיקוני צבע בזמן אמת ואפקטים חזותיים מותאמים אישית ועד ללמידת מכונה בצד הלקוח וניתוח וידאו, האפשרויות הן עצומות. עידן הווידאו בביצועים גבוהים וברמה נמוכה ברשת באמת החל.